<template>
  <div class="audioBox" id="bgAudioBox">
    <!--    @timeupdate="onTimeupdate"-->
    <audio
        :key="audioKey" ref="audio"
        @pause="onPause"
        @play="onPlay"
        loop
        @loadedmetadata="onLoadedmetadata"
        :src=audioSrca
        style="display: none"
        id="audioId">
    </audio>
    <div class="volumeBox" id="volumeBox">
      <img src="../../assets/image/openVolume.png" v-if="audio.playing" @click="openVolume">
      <img src="../../assets/image/closeVolume.png" v-else @click="closeVolume">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: true,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0
      },
      audioSrca: require("../../assets/audio/activity0.wav"),
      audioPage: true,
      audioKey: 0
    };
  },
  computed: {
    status() {
      return this.$store.state.audioPlay; //  Vuex 中定义的属性
    },
    audioSrc() {
      console.log("this.$store.state.audioUrl=" + this.$store.state.audioUrl)
      return this.$store.state.audioUrl; //
    }
  },
  watch: {
    status() {
      this.play();
    },
    audioSrc(newVal, oldVal) {
      //抽奖音乐
      console.log("newVal=" + newVal)
      this.pause();
      this.onPause();
      let url = "";
      this.audioSrca = require("../../assets/audio/activity" + newVal + ".wav");
      this.$nextTick(() => {
        this.play();
      });

      // if (newVal == 2) {
      //   this.pause();
      //   this.onPause();
      //   this.audioSrca = require("../../assets/drawAudio.wav");
      //   this.$nextTick(() => {
      //     this.play();
      //   });
      // }
      // //背景音乐
      // else {
      //   this.pause();
      //   this.onPause();
      //   this.audioSrca = require("../../assets/bg.wav");
      //   this.$nextTick(() => {
      //     this.play();
      //     // this.onPlay();
      //   });
      // }
    }
  },

  mounted() {
    // if (!this.$store.state.audioPlay) {
    //   this.play();
    //   this.onPlay();
    // }
    if (this.audio.playing) {
      document.getElementById("volumeBox").style.animationPlayState = "running";
    }
  },
  methods: {
    openVolume() {
      document.getElementById("volumeBox").style.animationPlayState = "paused";
      this.onPause();
      this.pause();

    },
    closeVolume() {
      document.getElementById("volumeBox").style.animationPlayState = "running";
      this.play();
      this.onPlay();
    },

    // 播放音频
    play() {
      this.$refs.audio.play();
    },
    // 暂停音频
    pause() {
      this.$refs.audio.pause();
    },
    // 当音频播放
    onPlay(data) {
      this.audio.playing = true;
    },
    // 当音频暂停
    onPause() {
      this.audio.playing = false;
    },
    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
    onTimeupdate(res) {
      this.audio.currentTime = res.target.currentTime;
      if (this.audio.currentTime == 15) {
        this.play();
      }
      if (this.audio.currentTime == 36) {
        this.play();
      }
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedmetadata(res) {
      this.audio.maxTime = parseInt(res.target.duration);
    }
  }


};
</script>
<style scoped lang="scss">
.audioBox {
  position: absolute;
  z-index: 999;

  .volumeBox {
    //animation: myfirst 2s infinite linear;
    //transform-origin: center 50%;
  }

  @keyframes myfirst {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }

}
</style>
